<template>
	<view>
		<Navbar></Navbar>
		<view class="u-form-box u-m-30">
			<u-form :model="form" label-width="200" ref="uForm">
				<u-form-item required="true" label="地址">
					<view class="u-text-right" :class="city ? '' : 'u-color-placeholder'"
						@click="onGetLocation">
						{{ city || '请选择详细地址 >'}}
					</view>
				</u-form-item>
				<u-form-item required="true" label="门牌号">
					<u-input placeholder="例：8楼290号" input-align="right" v-model="form.door" :clearable="false" />
				</u-form-item>
				<u-form-item required="true" label="姓名">
					<u-input placeholder="请填写收货人姓名" input-align="right" v-model="form.name" :clearable="false" />
				</u-form-item>
				<u-form-item required="true" label="手机号">
					<u-input placeholder="请填写联系人手机号" input-align="right" v-model="form.phone" :clearable="false" />
				</u-form-item>
				<u-form-item required="true" label="设为默认地址">
					<view class="u-flex u-row-right">
						<u-radio-group active-color="#B3723E" v-model="radioValue" @change="onRadioChange">
							<u-radio v-for="(item, index) in radioList" :key="index" :name="item.name">
								{{item.name}}
							</u-radio>
						</u-radio-group>
					</view>
				</u-form-item>
			</u-form>
		</view>
		<Bottom :btnText="btnText" :isClick="bottomBtnStatus" @confirm="onConfirm"></Bottom>
		
		
		<!-- 省市区 -->
		<UniAddressSelector v-if="showUniAddressSelector" :selectAreaLevelLimit="3" :isSZ="0" @cancel="showUniAddressSelector = false"
			@confirm="onConfirmArea"></UniAddressSelector>
	</view>
</template>

<script>
	import Navbar from '@/components/Navbar.vue'
	import Bottom from '@/components/Bottom.vue'
	import { teaAdressAdd, teaAdressEdit, teaAdressInfo } from '@/network/tea.js'
	import { hasEmptyValue } from '@/utils/index.js'
	export default {
		components: {
			Navbar,
			Bottom
		},
		data() {
			return {
				addressId: 0,
				form:{
					name: '',
				    phone: '',
					door: ''
				},
				city: '',
				btnText: '确认提交',
				radioList: [
					{name:'否'},
					{name:'是'}
				],
				radioValue: '否',
				bottomBtnStatus: true
			}
		},
		onLoad(options){
			if(options.id){
				this.addressId = options.id
				this.onGetAddressInfo()
			}
		},
		methods:{
			async onGetAddressInfo(){
				const res = await teaAdressInfo({address_id: this.addressId})
				this.city = res.data.address.substring(0,res.data.address.indexOf("区") + 1)
				this.form.door = res.data.door
				this.form.name = res.data.name
				this.form.phone = res.data.phone
				if(res.data.default == 1){
					this.radioValue = '是'
				}
			},
			onGetLocation(){
				const _this = this
				uni.chooseLocation({
					success: function(res) {
						_this.city = res.address.substring(0,res.address.indexOf("区") + 1)
						_this.form.door = res.name
					}
				})
			},
			onRadioChange(){},
			async onConfirm(){
				this.bottomBtnStatus = false
				if(hasEmptyValue(this.form)){
					const params = {
						...this.form,
						user_id: uni.getStorageSync("user_id"),
						address: this.city + this.form.door,
						default: this.radioValue == '是' ? 1 : 0
					}
					let reqUrl = teaAdressAdd
					if(this.addressId){
						reqUrl = teaAdressEdit
						params.address_id = this.addressId
					}
					const res = await reqUrl(params)
					this.bottomBtnStatus = true
					uni.navigateBack({
						delta: 1,
						success() {
							uni.$emit('update', {
								msg: '页面更新'
							})
						}
					})
				}else{
					this.bottomBtnStatus = true
					uni.showToast({
						title: "必填项不能为空",
						icon: "none"
					})
				}
			}
		}
	}
</script>

<style>
</style>